<template>
  <div>
    <div class="test">
      
    </div>
    <div class="manChart">
      <LineChart :chart="depLineChart" :key="myKey"/>
    </div>
    <div class="girlChart">
      <LineChart :chart="classLineChat" :key="myKey2"  />
    </div>
    <div class="pieChart">
      <PieChart :chart="pieChartData" :key="myKey3" />
    </div>
  </div>
</template>

<script>
import LineChart from "../chart/LineChart";
import PieChart from "../chart/PieChart";
export default {
    name: "Chart",
    components: {
        LineChart,
        PieChart
    },
    computed:{
      depLineChart(){
        return this.$store.state.ChartData.depLineChart
      },
      classLineChat(){
        return this.$store.state.ChartData.classLineChat
      },
      pieChartData(){
        return this.$store.state.ChartData.pieChartData
      },
      myKey(){
        return this.$store.state.ChartData.myKey
      },
       myKey2(){
        return this.$store.state.ChartData.myKey2
      },
      myKey3(){
        return this.$store.state.ChartData.myKey3
      }
    },
    beforeCreate(){

    },
    mounted(){
      // console.log("Chart挂在");
      this.$bus.$emit('ControlHomeSpan',false);
      this.$store.dispatch('ChartData/getDepChartData');
      this.$store.dispatch('ChartData/getClassChartData');
      this.$store.dispatch('ChartData/getSexChartData');
    },
    beforeDestroy(){
      this.$store.commit('ChartData/destroyChartData');
    },
    data(){
        return {
            
        }
    },

};
</script>

<style scoped>
.test{
   position: absolute;
    top: 130px;
    left: 10%;
}
.manChart{
   position: absolute;
    top: 130px;
    left: 10%;
}
.girlChart{
   position: absolute;
    top: 130px;
    left: 60%;
}
.pieChart{
  position: absolute;
    top: 450px;
    left: 30%;
}
</style>